<template>
  <div>
    <el-button @click="roleDialog = true"> 角色管理 </el-button>
    <el-button @click="legendData"> 图例查询 </el-button><br />

    <el-dialog title="角色列表" :visible.sync="roleDialog">
      <el-table :data="roleList">
        <el-table-column
          v-model="name"
          property="name"
          label="权限"
        ></el-table-column>

        <el-table-column
          property="description"
          label="注解 身份"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="deleteRole(scope.$index, scope.row)"
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-share"
              @click="beforeUpdateRole(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column> </el-table
      ><br />

      <el-form>
        <el-form-item>
          <el-input
            v-model="name"
            placeholder="請輸入權限"
            :readonly="ifUpdate"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="description"
            placeholder="請輸入描述的内容"
          ></el-input>
        </el-form-item>
        <el-button
          type="primary"
          icon="el-icon-circle-plus"
          @click="addRole"
          v-if="!ifUpdate"
          >添加角色</el-button
        >
        <el-button
          type="warning"
          icon="el-icon-share"
          @click="updateRole"
          v-if="ifUpdate"
          >修改角色</el-button
        >
        <el-button icon="el-icon-share" @click="cancelUpdate" v-if="ifUpdate"
          >取消修改</el-button
        >
      </el-form>
    </el-dialog>

    <template>
      <el-table
        :data="
          userList.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column prop="userName" label="用户名" align="center">
        </el-table-column>
        <el-table-column prop="fullName" label="昵称" align="center">
        </el-table-column>
        <el-table-column label="身份" align="center">
          <template slot-scope="scope">
            <template v-if="!scope.row.ifChange">
              {{ scope.row.description }}
            </template>
            <template v-else>
              <el-select v-model="scope.row.description" placeholder="请选择">
                <el-option
                  v-for="item in roleList"
                  :key="item.name"
                  :label="item.description"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click="scope.row.ifChange = false"
              v-if="scope.row.ifChange"
              size="mini"
              >取消更改</el-button
            >
            <el-button size="mini" @click="changeRole(scope.$index, scope.row)"
              >更改权限</el-button
            >
            <el-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不用了"
              icon="el-icon-info"
              icon-color="red"
              title="你确定要封掉这个账号吗？"
              @onConfirm="prohibitAccount(scope.row, false)"
            >
              <el-button
                type="danger"
                size="mini"
                slot="reference"
                v-if="scope.row.enable"
                >封禁账号</el-button
              >
            </el-popconfirm>
            <el-button
              size="mini"
              slot="reference"
              v-if="!scope.row.enable"
              @click="prohibitAccount(scope.row, true)"
              >解封账号</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        align="center"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pagesize"
        background
        layout="total, prev, pager, next, jumper"
        :total="pageTotal"
      >
      </el-pagination>
    </template>

    <!-- 图例dialog -->
    <el-dialog
      :visible.sync="legendDataDialog"
      width="640px"
      :before-close="dialogClose"
    >
      <v-chart :options="legendPie" autoresize theme="light"></v-chart>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { mapState, mapActions } from "vuex";
export default {
  inject: ["reload"],
  name: "adminChangeRole",
  data() {
    return {
      loading: false,
      //权限表
      roleList: [],
      //权限名称
      name: "",
      //权限描述
      description: "",
      //权限dialog
      roleDialog: false,
      //更新按钮显示
      ifUpdate: false,
      //用户列表
      userList: [],
      //初始页
      currentPage: 1,
      //每页的数据
      pagesize: 10,
      //数组总数
      pageTotal: 100000,
      //旧的权限
      oldRole: "",
      //图例dialog
      legendDataDialog: false,
      //饼状图
      legendPie: {},
    };
  },
  computed: {
    ...mapState({
      print: (state) => state.print.all,
    }),
  },
  mounted: function () {
    this.getUserList();
  },
  methods: {
    getUserList: function () {
      var that = this;
      this.loading = true;
      axios
        .all([
          //获取用户信息
          axios({
            headers: {
              Authorization: this.print.Authorization,
            },
            method: "get",
            url: "/api/users?pageNum=0&pageSize=100000",
          }),
          //获取权限角色
          axios({
            headers: {
              Authorization: this.print.Authorization,
            },
            method: "get",
            url: "/api/roles",
          }),
        ])
        .then(
          axios.spread(function (userResponse, roleResponse) {
            //用户返回处理
            that.userList = userResponse.data.data;
            that.pageTotal = that.userList.length;
            //角色返回处理
            that.roleList = roleResponse.data.data;
            //获得用户角色
            var _that = that;
            that.userList.forEach((item) => {
              that.$set(item, "description", "普通用户");
              //判断教师
              axios({
                headers: {
                  Authorization: that.print.Authorization,
                },
                method: "get",
                params: {
                  username: item.userName,
                },
                url: "/api/users/check",
              }).then(function (response) {
                if (response.data.data == true)
                  _that.$set(item, "description", "教师");
              });
              //判断管理员
              axios({
                headers: {
                  Authorization: that.print.Authorization,
                },
                method: "get",
                params: {
                  username: item.userName,
                },
                url: "/api/users/check/admin",
              }).then(function (response) {
                if (response.data.data == true)
                  _that.$set(item, "description", "管理员");
              });
              that.$set(item, "ifChange", false);
            });
            that.loading = false;
          })
        );
    },

    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },

    //新的刪除角色
    deleteRole(index, row) {
      var that = this;
      axios({
        headers: {
          Authorization: this.print.Authorization,
          "Content-Type": "application/x-www-form-urlencoded",
        },
        method: "delete",
        url: "/api/roles?name=" + row.name + "&description=" + row.description,
      }).then(
        function (repponse) {
          that.$message({
            message: "删除成功",
            type: "success",
          });
          that.roleList.splice(index, 1);
        },
        function (err) {
          that.$message.error("删除失败，请重新尝试");
        }
      );
    },

    addRole: function () {
      var that = this;
      axios({
        headers: {
          Authorization: this.print.Authorization,
        },
        method: "post",
        url:
          "/api/roles?name=" + this.name + "&description=" + this.description,
      }).then(
        function (repponse) {
          that.$message({
            message: "添加成功",
            type: "success",
          });
          that.roleList.push({
            name: that.name,
            description: that.description,
          });
        },
        function (err) {
          that.$message.error("添加失败，请重新尝试");
        }
      );
    },

    beforeUpdateRole: function (index, row) {
      this.ifUpdate = true;
      this.name = row.name;
      this.description = row.description;
    },

    cancelUpdate: function () {
      this.ifUpdate = false;
      this.name = "";
      this.description = "";
    },

    updateRole: function () {
      var that = this;
      if (this.name != "" && this.description != "") {
        axios({
          headers: {
            Authorization: this.print.Authorization,
            "Content-Type": "application/x-www-form-urlencoded",
          },
          method: "put",
          url:
            "/api/roles?name=" + this.name + "&description=" + this.description,
        }).then(
          function (repponse) {
            that.$message({
              message: "更改成功",
              type: "success",
            });
            that.reload();
          },
          function (err) {
            that.$message.error("更改失败，请重新尝试");
          }
        );
      } else {
        that.$message({
          message: "没有填写表单",
          type: "warning",
        });
      }
    },

    handleFall(index, row) {
      var that = this;
    },

    changeRole: function (index, row) {
      if (row.ifChange == false) {
        row.ifChange = true;
        if (row.description == "管理员") this.oldRole = "ADMIN";
        else if (row.description == "教师") this.oldRole = "MANAGER";
        else if (row.description == "普通用户") this.oldRole = "USER";
      } else {
        var that = this;
        //普通用户不需要删除角色
        if (this.oldRole == "USER") {
          axios({
            headers: {
              Authorization: that.print.Authorization,
              "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            },
            method: "post",
            url: "/api/userRole",
            params: {
              userName: row.userName,
              roleName: row.description,
            },
          }).then(
            function (response) {
              that.$message({
                message: "更改权限成功",
                type: "success",
              });
              if (row.description == "ADMIN") row.description = "管理员";
              else if (row.description == "MANAGER") row.description = "教师";
              else if (row.description == "USER") row.description = "普通用户";
            },
            function (err) {
              that.$message.error("更改权限失败");
            }
          );
        } else {
          //变回普通用户需要删除
          if (row.description == "USER") {
            axios({
              headers: { Authorization: this.print.Authorization },
              method: "delete",
              url: "/api/userRole",
              params: {
                userName: row.userName,
                roleName: this.oldRole,
              },
            }).then(
              function (response) {
                that.$message({
                  message: "更改权限成功",
                  type: "success",
                });
                if (row.description == "ADMIN") row.description = "管理员";
                else if (row.description == "MANAGER") row.description = "教师";
                else if (row.description == "USER")
                  row.description = "普通用户";
              },
              function (err) {
                that.$message.error("更改权限失败");
              }
            );
          } else {
            //先删除角色
            axios({
              headers: { Authorization: this.print.Authorization },
              method: "delete",
              url: "/api/userRole",
              params: {
                userName: row.userName,
                roleName: this.oldRole,
              },
            }).then(
              function (response) {
                var _that = that;
                axios({
                  headers: {
                    Authorization: that.print.Authorization,
                    "Content-Type":
                      "application/x-www-form-urlencoded;charset=UTF-8",
                  },
                  method: "post",
                  url: "/api/userRole",
                  params: {
                    userName: row.userName,
                    roleName: row.description,
                  },
                }).then(
                  function (response) {
                    _that.$message({
                      message: "更改权限成功",
                      type: "success",
                    });
                    if (row.description == "ADMIN") row.description = "管理员";
                    else if (row.description == "MANAGER")
                      row.description = "教师";
                    else if (row.description == "USER")
                      row.description = "普通用户";
                  },
                  function (err) {
                    _that.$message.error("更改权限失败");
                  }
                );
              },
              function (err) {
                that.$message.error("更改权限失败");
              }
            );
          }
        }
        row.ifChange = false;
      }
    },

    prohibitAccount: function (row, bool) {
      var that = this;
      axios({
        headers: {
          Authorization: that.print.Authorization,
        },
        method: "put",
        url: "/api/users",
        data: {
          userName: row.userName,
          enabled: bool,
        },
      }).then(
        function (response) {
          if (bool == false) {
            that.$message({
              message: "封禁用户成功",
              type: "success",
            });
            row.enable = false;
          } else {
            that.$message({
              message: "解禁用户成功",
              type: "success",
            });
            row.enable = true;
          }
        },
        function (err) {
          that.$message.error("操作失败");
        }
      );
    },

    legendData: function () {
      this.legendDataDialog = true;
      // 指定图表的配置项和数据
      // 只包含了三个角色
      this.legendPie = {
        // 图例
        legend: {
          data: ["管理员", "教师", "普通用户"],
        },
        // 提示框
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        //工具栏
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ["pie", "funnel"],
            },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        series: [
          {
            name: "用户饼状图",
            // 设置图表类型为饼图
            type: "pie",
            // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            radius: "55%",
            // 把饼图显示成南丁格尔图
            // roseType: "angle",
            // 数据数组，name 为数据项名称，value 为数据项值
            data: [
              {
                value: this.userList.filter(
                  (item) => item.description == "管理员"
                ).length,
                name: "管理员",
              },
              {
                value: this.userList.filter(
                  (item) => item.description == "教师"
                ).length,
                name: "教师",
              },
              {
                value: this.userList.filter(
                  (item) => item.description == "普通用户"
                ).length,
                name: "普通用户",
              },
            ],
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            lableLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
          },
        ],
      };
    },

    //防止操作时点击dialog外部
    dialogClose: function () {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.legendDataDialog = false;
        })
        .catch((_) => {});
    },
  },
};
</script>

<style>
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}
</style>
